<template>
  <edit-card :title="title" :type="type" :loading="submitLoading" back-url="/admin/algo-service-manage/list" @confirm="handleConfirm">
    <div class="content-box">
      <div v-if="type === 'add'">
        <a-anchor
          style="position: absolute; right: -50px"
          :show-ink-in-fixed="false"
          :offset-top="200"
          :target-offset="500"
          @click="anchorClick"
        >
          <a-anchor-link href="#addService" title="算法详情" />
          <a-anchor-link href="#addVersion" title="上传版本" />
        </a-anchor>
      </div>
      <div id="addService">
        <div v-if="type === 'add'" class="module-title">
          <span class="title">算法详情</span>
        </div>
        <div class="form-box">
          <a-form ref="formRef" :colon="false" :model="baseFrom" label-align="left" :rules="rules" style="min-width: 560px">
            <a-form-item label="名称" name="algorithmName">
              <div class="mini-width">
                <a-input
                  v-model:value="baseFrom.algorithmName"
                  v-trim
                  :disabled="type === 'edit'"
                  :maxlength="200"
                  placeholder="请输入算法服务名称"
                />
              </div>
            </a-form-item>
            <a-form-item label="服务类型">
              <div class="tag-box">
                <a-button type="link" size="small" @click="handleOpenClassTagModal">选择</a-button>
                <div class="tag-list">
                  <tag v-for="(item, index) in classCheckedLabelList" :key="index" class="tag typeTag" color="#4686ed">
                    <!-- {{ item.label }} -->
                    <a-tooltip placement="topLeft">
                      <template #title>
                        <span>{{ item.label }}</span>
                      </template>
                      {{ item.label }}
                    </a-tooltip>
                    <template #right>
                      <span class="close"><i class="iconfont icon-close-line" @click="handleRemoveClassTag(index)"></i></span>
                    </template>
                  </tag>
                </div>
              </div>
            </a-form-item>
            <a-form-item label="服务标签" name="labels">
              <div class="tag-box">
                <a-button type="link" size="small" @click="handleOpenStyleTagModal">选择</a-button>
                <div class="tag-list">
                  <tag v-for="(item, index) in styleCheckedLabelList" :key="index" class="tag personalizedTag" color="#4686ed">
                    <!-- {{ item.label }} -->
                    <a-tooltip placement="topLeft">
                      <template #title>
                        <span>{{ item.label }}</span>
                      </template>
                      {{ item.label }}
                    </a-tooltip>
                    <template #right>
                      <span class="close"><i class="iconfont icon-close-line" @click="handleRemoveStyleTag(index)"></i></span>
                    </template>
                  </tag>
                </div>
              </div>
            </a-form-item>
            <a-form-item label="预览图" name="imageUrl" style="width: 560px">
              <image-upload
                v-model:image-url="baseFrom.downloadImageUrl"
                v-model:image-name="baseFrom.imageUrl"
                class="w312"
                :dpi="[800, 800]"
                :max-file-size="1"
              >
                <template #info>
                  <div class="upload-image-info">
                    <div>
                      <p>大小不超过1M</p>
                      <p>分辨率大小800*800</p>
                      <p>仅支持jpg、jpeg、png格式</p>
                    </div>
                  </div>
                </template>
              </image-upload>
            </a-form-item>
            <a-form-item class="form-item" label="简介" name="algorithmDescribe">
              <a-textarea
                v-model:value="baseFrom.algorithmDescribe"
                v-trim
                show-count
                :auto-size="{ minRows: 8 }"
                :maxlength="200"
                placeholder="请输入简介"
              />
            </a-form-item>
            <a-form-item label="功能演示" name="functionDemo">
              <div class="mini-width">
                <a-input v-model:value="baseFrom.functionDemo" v-trim placeholder="请输入演示地址" />
              </div>
            </a-form-item>
            <a-form-item label="功能介绍" class="required">
              <div class="demo-info-list">
                <div v-for="(item, index) in baseFrom.createAlgorithmFunctionIntroductionDtoS" :key="index" class="demo-info">
                  <div class="input-box">
                    <a-form-item
                      v-trim
                      :name="['createAlgorithmFunctionIntroductionDtoS', index, 'functionTag']"
                      :rules="[{ message: '请输入标题', required: true, trigger: 'change' }]"
                      style="margin-bottom: 0"
                    >
                      <a-input v-model:value="item.functionTag" :maxlength="20" placeholder="请输入标题" />
                    </a-form-item>
                  </div>
                  <a-form-item
                    :name="['createAlgorithmFunctionIntroductionDtoS', index, 'functionContent']"
                    :rules="[{ message: '请输入描述内容', required: true, trigger: 'change' }]"
                    style="margin-bottom: 0"
                  >
                    <a-textarea
                      v-model:value="item.functionContent"
                      v-trim
                      placeholder="请输入描述内容"
                      show-count
                      :auto-size="{ minRows: 8 }"
                      :maxlength="200"
                    />
                  </a-form-item>

                  <div class="tools">
                    <span :class="[index == 0 && 'disable']" @click="index > 0 ? moveUp('demoIntro', index) : ''">
                      <i class="iconfont icon-arrow-up-s-fill"></i>
                    </span>
                    <span
                      :class="['down-btn', index == baseFrom.createAlgorithmFunctionIntroductionDtoS.length - 1 && 'disable']"
                      @click="index != baseFrom.createAlgorithmFunctionIntroductionDtoS.length - 1 ? moveDown('demoIntro', index) : ''"
                    >
                      <i class="iconfont icon-arrow-down-s-fill"></i>
                    </span>
                    <span class="mid-line"></span>
                    <span :class="['delete-btn', index === 0 && 'disable']" @click="index > 0 ? deleteDemo('demoIntro', index) : ''">
                      <i class="iconfont icon-delete-bin-6-fill"></i>
                    </span>
                  </div>
                </div>
                <div class="demo-add" @click="addDemo('demoIntro')"><i class="iconfont icon-add-line"></i></div>
              </div>
            </a-form-item>

            <a-form-item label="适用场景" class="required">
              <a-form-item-rest>
                <div class="demo-info-list">
                  <div v-for="(item, index) in baseFrom.createAlgorithmApplicationScenarioDtoS" :key="index" class="demo-info">
                    <div class="input-box">
                      <a-form-item
                        v-trim
                        :name="['createAlgorithmApplicationScenarioDtoS', index, 'scenarioTag']"
                        :rules="[{ message: '请输入标题', required: true, trigger: 'change' }]"
                        style="margin-bottom: 0"
                      >
                        <a-input v-model:value="item.scenarioTag" :maxlength="20" placeholder="请输入标题" />
                      </a-form-item>
                    </div>

                    <a-form-item
                      :name="['createAlgorithmApplicationScenarioDtoS', index, 'scenarioContent']"
                      :rules="[{ message: '请输入描述内容', required: true, trigger: 'change' }]"
                      style="margin-bottom: 0"
                    >
                      <a-textarea
                        v-model:value="item.scenarioContent"
                        v-trim
                        placeholder="请输入描述内容"
                        show-count
                        :auto-size="{ minRows: 8 }"
                        :maxlength="200"
                      />
                    </a-form-item>
                    <div class="scene-upload">
                      <a-form-item
                        :name="['createAlgorithmApplicationScenarioDtoS', index, 'downloadImageUrl']"
                        :rules="[{ message: '请上传图片', required: true, trigger: 'change' }]"
                        style="margin-bottom: 0"
                      >
                        <image-upload
                          v-model:image-url="item.downloadImageUrl"
                          v-model:image-name="item.imageUrl"
                          class="w312"
                          :dpi="[1440, 640]"
                          :max-file-size="1"
                        >
                          <template #info>
                            <div class="upload-image-info">
                              <div>
                                <p>大小不超过1M</p>
                                <p>分辨率大小1440*640</p>
                                <p>仅支持jpg、jpeg、png格式</p>
                              </div>
                            </div>
                          </template>
                        </image-upload>
                      </a-form-item>
                    </div>
                    <div class="tools">
                      <span :class="[index == 0 && 'disable']" @click="index > 0 ? moveUp('applicableScene', index) : ''">
                        <i class="iconfont icon-arrow-up-s-fill"></i>
                      </span>
                      <span
                        :class="['down-btn', index == baseFrom.createAlgorithmApplicationScenarioDtoS.length - 1 && 'disable']"
                        @click="
                          index != baseFrom.createAlgorithmApplicationScenarioDtoS.length - 1 ? moveDown('applicableScene', index) : ''
                        "
                      >
                        <i class="iconfont icon-arrow-down-s-fill"></i>
                      </span>
                      <span class="mid-line"></span>
                      <span
                        :class="['delete-btn', index === 0 && 'disable']"
                        @click="index > 0 ? deleteDemo('applicableScene', index) : ''"
                      >
                        <i class="iconfont icon-delete-bin-6-fill"></i>
                      </span>
                    </div>
                  </div>
                  <div class="demo-add" @click="addDemo('applicableScene')"><i class="iconfont icon-add-line"></i></div>
                </div>
              </a-form-item-rest>
            </a-form-item>
          </a-form>
        </div>
      </div>

      <div style="margin-top: 120px">
        <version-form v-if="type === 'add'" ref="versionFromRef" />
      </div>
    </div>
  </edit-card>
  <!-- 服务类型modal -->
  <tag-modal ref="classTagModalRef" v-model:checkedList="baseFrom.types" v-model:checked-label-list="classCheckedLabelList" />
  <!-- 服务标签modal -->
  <tag-modal ref="styleTagModalRef" v-model:checkedList="baseFrom.labels" v-model:checked-label-list="styleCheckedLabelList" />
</template>

<script lang="ts" setup>
  import { CheckboxOptionType, message } from 'ant-design-vue'
  import type { Rule } from 'ant-design-vue/es/form'
  import { cloneDeep, debounce, regex } from 'g6-fn'
  import { computed, onMounted, reactive, ref } from 'vue'
  import { useRequest } from 'vue-request'
  import { useRoute, useRouter } from 'vue-router'

  // import ImageUpload from '@/components/ImageUpload/index.vue'
  import Tag from '@/components/TableTag/index.vue'
  import { algoDepotApi } from '@/services/api'
  import { validateBitLen, validateDirName } from '@/utils'

  // import { useSysInfoStore } from '@/store/systemInfo'
  import TagModal from '../components/tag-modal.vue'
  import VersionForm from '../components/version-form.vue'

  onMounted(() => {
    runGetTags()
    type === 'edit' && getDetail(routeQuery.id)
  })

  const anchorClick = (e: MouseEvent, link: { title: any; href: string }) => {
    const { href } = link
    const dom = document.querySelector(href) as HTMLElement
    window.parent.scrollTo({
      top: dom.offsetTop - 100,
      behavior: 'smooth'
    })
  }

  const route = useRoute()
  const router = useRouter()
  // const { layoutInfo } = useSysInfoStore()
  const routeQuery = route.params as any
  const type = (routeQuery.id ? 'edit' : 'add') as 'add' | 'edit'
  const detailId = routeQuery.id
  const title = computed(() => {
    return detailId ? `编辑服务（${baseFrom?.algorithmName}）` : '创建服务'
  })
  const formRef = ref()
  const versionFromRef = ref()
  const demoIntro = { functionTag: '', functionContent: '', sort: 0 }
  const applicableScene = {
    scenarioTag: '',
    scenarioContent: '',
    imageUrl: undefined,
    downloadImageUrl: undefined,
    sort: 0
  }

  // 标签数据
  const tagsOption = reactive({
    classTag: [] as CheckboxOptionType[],
    styleTag: [] as CheckboxOptionType[]
  })

  // 获取标签
  const { runAsync: runGetTags } = useRequest<ResponseData<any>>(algoDepotApi.getTags, {
    onSuccess: res => {
      const list: any[] = res.data.map((item: any) => {
        return { label: item.v, value: item.id, type: item.type }
      })
      tagsOption.classTag = list.filter((item: any) => {
        return item.type === 'type_tag'
      })
      tagsOption.styleTag = list.filter((item: any) => {
        return item.type === 'special_tag'
      })
    }
  })

  // 获取详情数据并回填
  const { runAsync: getDetail } = useRequest<ResponseData<any>>(algoDepotApi.detail, {
    onSuccess: res => {
      const { data } = res
      baseFrom.algorithmName = data?.algorithmName
      baseFrom.algorithmDescribe = data?.algorithmDescribe
      baseFrom.types = data?.typeAndNames?.map((item: any) => {
        return item.dicId
      })
      baseFrom.labels = data?.labelAndNames?.map((item: any) => {
        return item.dicId
      })
      classCheckedLabelList.value = data?.typeAndNames?.map((item: any) => {
        return { label: item.name, value: item.dicId }
      })
      styleCheckedLabelList.value = data?.labelAndNames?.map((item: any) => {
        return { label: item.name, value: item.dicId }
      })
      baseFrom.imageUrl = data?.imageUrl
      baseFrom.downloadImageUrl = data?.downloadImageUrl
      baseFrom.functionDemo = data?.functionDemo
      baseFrom.createAlgorithmApplicationScenarioDtoS = data?.algorithmApplicableScenarioVOList
      baseFrom.createAlgorithmFunctionIntroductionDtoS = data?.algorithmFunctionIntroductionVOList
    },
    onError: () => {
      message.error('数据解析错误')
    }
  })

  /**
   * 服务类型
   */
  const classTagModalRef = ref()
  const classCheckedLabelList = ref<CheckboxOptionType[]>([])
  const handleOpenClassTagModal = () => {
    classTagModalRef.value.open(tagsOption.classTag)
  }
  const handleRemoveClassTag = (index: number) => {
    baseFrom.types.splice(index, 1)
    classCheckedLabelList.value.splice(index, 1)
  }

  /**
   * 服务标签
   */
  const styleTagModalRef = ref()
  const styleCheckedLabelList = ref<CheckboxOptionType[]>([])
  const handleOpenStyleTagModal = () => {
    styleTagModalRef.value.open(tagsOption.styleTag)
  }
  const handleRemoveStyleTag = (index: number) => {
    baseFrom.labels.splice(index, 1)
    styleCheckedLabelList.value.splice(index, 1)
  }

  const baseFrom = reactive({
    algorithmName: '',
    types: [],
    labels: [],
    imageUrl: undefined,
    downloadImageUrl: undefined,
    algorithmDescribe: '',
    functionDemo: '',
    createAlgorithmFunctionIntroductionDtoS: [{ ...demoIntro }],
    createAlgorithmApplicationScenarioDtoS: [{ ...applicableScene }]
  })
  const baseFromInit = cloneDeep(baseFrom)
  const validateFunctionInt = () => {
    const list = baseFrom.createAlgorithmFunctionIntroductionDtoS
    for (let index = 0; index < list.length; index++) {
      const element = list[index]
      if (!element.functionTag || !element.functionContent) {
        return Promise.reject('请完善功能介绍')
      }
    }
    return Promise.resolve()
  }
  const validateApplication = () => {
    const list = baseFrom.createAlgorithmApplicationScenarioDtoS
    for (let index = 0; index < list.length; index++) {
      const element = list[index]
      if (!element.scenarioTag || !element.scenarioContent || !element.imageUrl) {
        return Promise.reject('请完善适用场景')
      }
    }
    return Promise.resolve()
  }

  // 验证规则
  const rules: Record<string, Rule[]> = {
    algorithmName: [
      { required: true, message: '请输入算法服务名称', trigger: 'change' },
      { validator: validateDirName() },
      { validator: validateBitLen(200), trigger: 'change' }
    ],
    functionDemo: [
      { required: false, message: '请输入地址' },
      {
        pattern: regex.url,
        message: `请输入以 'http'、'https'、'ftp' 或 'ftps' 开头的 URL`
      }
    ],
    imageUrl: [{ required: true, message: '请上传预览图', trigger: 'change' }],
    algorithmDescribe: [{ required: true, message: '请输入简介', trigger: 'change' }],
    createAlgorithmFunctionIntroductionDtoS: [{ required: true, validator: validateFunctionInt, trigger: 'change' }],
    createAlgorithmApplicationScenarioDtoS: [{ required: true, validator: validateApplication, trigger: 'change' }]
  }

  // 新增一项
  const addDemo = (type: string) => {
    if (type === 'demoIntro') {
      baseFrom.createAlgorithmFunctionIntroductionDtoS.push({ ...demoIntro })
    } else if (type === 'applicableScene') {
      baseFrom.createAlgorithmApplicationScenarioDtoS.push({ ...applicableScene })
    }
  }

  // 删除一项
  const deleteDemo = (type: string, index: number) => {
    if (type === 'demoIntro') {
      baseFrom.createAlgorithmFunctionIntroductionDtoS.splice(index, 1)
    } else if (type === 'applicableScene') {
      baseFrom.createAlgorithmApplicationScenarioDtoS.splice(index, 1)
    }
    formRef.value.validateFields()
  }

  // 向上移动
  const moveUp = (type: string, index: number) => {
    if (type === 'demoIntro') {
      const temp = baseFrom.createAlgorithmFunctionIntroductionDtoS[index]
      baseFrom.createAlgorithmFunctionIntroductionDtoS.splice(index, 1)
      baseFrom.createAlgorithmFunctionIntroductionDtoS.splice(index - 1, 0, temp)
    } else if (type === 'applicableScene') {
      const temp = baseFrom.createAlgorithmApplicationScenarioDtoS[index]
      baseFrom.createAlgorithmApplicationScenarioDtoS.splice(index, 1)
      baseFrom.createAlgorithmApplicationScenarioDtoS.splice(index - 1, 0, temp)
    }
    formRef.value.validateFields()
  }

  // 向下移动
  const moveDown = (type: string, index: number) => {
    if (type === 'demoIntro') {
      const temp = baseFrom.createAlgorithmFunctionIntroductionDtoS[index]
      baseFrom.createAlgorithmFunctionIntroductionDtoS.splice(index, 1)
      baseFrom.createAlgorithmFunctionIntroductionDtoS.splice(index + 1, 0, temp)
    } else if (type === 'applicableScene') {
      const temp = baseFrom.createAlgorithmApplicationScenarioDtoS[index]
      baseFrom.createAlgorithmApplicationScenarioDtoS.splice(index, 1)
      baseFrom.createAlgorithmApplicationScenarioDtoS.splice(index + 1, 0, temp)
    }
    formRef.value.validateFields()
  }

  // 提交
  const { runAsync: runAdd } = useRequest(algoDepotApi.add, {
    onSuccess: () => {
      message.success('操作成功')
      resetFields()
      versionFromRef.value.resetFields()
      // router.replace({
      //   path: '/success',
      //   query: { text: '创建成功！', link: '', btnText: '返回算法列表' }
      // })
      // router.replace({
      //   path: '/open-platform/algo-service/service-list/list'
      // })
      router.back()
    }
  })
  const { runAsync: runUpdate } = useRequest(algoDepotApi.update, {
    onSuccess: () => {
      message.success('操作成功')
      resetFields()
      router.go(-1)
    }
  })
  // loading编辑
  const submitLoading = ref(false)
  const handleConfirm = debounce(async () => {
    try {
      let versionFrom: any = {}
      let params: any = {}

      // 1、校验表单
      if (type === 'add') {
        await Promise.all([formRef.value.validateFields(), versionFromRef.value.getVersionFrom()])
      } else {
        await formRef.value.validateFields()
      }
      submitLoading.value = true

      // 2、过滤数据
      baseFrom.createAlgorithmApplicationScenarioDtoS = baseFrom?.createAlgorithmApplicationScenarioDtoS.map((item, index) => {
        return { ...item, sort: index }
      })
      baseFrom.createAlgorithmFunctionIntroductionDtoS = baseFrom?.createAlgorithmFunctionIntroductionDtoS.map((item, index) => {
        return { ...item, sort: index }
      })

      // 3、发送数据
      if (type === 'add') {
        // 新增 需要传算法服务数据和版本数据
        versionFrom = versionFromRef.value.versionFrom
        params = { ...baseFrom, createAlgorithmVersionDto: { ...versionFrom } }
        await runAdd(params, { isAddUid: true })
      } else {
        // 修改 只需传算法服务数据
        params = { ...baseFrom, id: routeQuery.id }
        await runUpdate(params, { isAddUid: true })
      }
      submitLoading.value = false
    } catch (error) {
      submitLoading.value = false
    }
  }, 500)

  // 重置表单
  const resetFields = () => {
    formRef.value.resetFields()
    Object.assign(baseFrom, baseFromInit)
    classCheckedLabelList.value = []
    styleCheckedLabelList.value = []
  }
</script>

<style lang="less" scoped>
  input {
    width: 440px !important;
  }

  .form-item {
    :deep(.ant-form-item-control-input) {
      width: 440px !important;
    }
  }

  :deep(textarea::-webkit-scrollbar) {
    display: none !important;
  }

  :deep(.ant-upload-list-text-container) {
    transition: none;
  }

  :deep(.ant-upload-list) {
    display: inline-block;
    margin-left: 16px;
    min-width: 272px;
  }

  :deep(.ant-anchor-ink-ball) {
    left: -50%;
    width: 2px;
    height: 22px;
    border-radius: 0;
    transform: translate(0, -7px);
  }

  :deep(.ant-upload-picture-card-wrapper) {
    width: 140px;
  }

  :deep(.ant-form-item) {
    margin-bottom: 40px;
  }

  :deep(.ant-form-item-label > label) {
    min-width: 120px;
  }

  // :deep(.ant-input-textarea-show-count::after) {
  //   position: absolute;
  //   right: 12px;
  //   bottom: 8px;
  // }

  .upload-image-info {
    justify-content: flex-end;
    margin-top: auto;
    font-size: 12px;
    text-align: right;
    text-align: end;
    color: rgba(25, 25, 48, 0.45);
    line-height: 20px;
  }

  .content-box {
    .module-title {
      display: flex;
      align-items: center;
      padding: 0 0 56px;

      .icon {
        font-size: 24px;
        color: rgba(65, 84, 209, 1);
      }

      .title {
        .font20b();

        position: relative;
        margin-left: 16px;
        color: rgba(16, 16, 20, 0.95);

        &::before {
          position: absolute;
          top: 50%;
          left: -16px;
          width: 3px;
          height: 22px;
          background: #1868e9;
          border-radius: 0 2px 2px 0;
          content: '';
          transform: translateY(-50%);
          flex: none;
          order: 0;
          align-self: stretch;
          flex-grow: 0;
        }
      }
    }

    .form-box {
      max-width: 752px;

      .scene-upload {
        margin-top: 16px;

        :deep(.upload-info) {
          display: flex;
          justify-content: flex-end;
        }
      }

      .preview-upload {
        :deep(.ant-upload.ant-upload-select-picture-card) {
          width: 140px;
          height: 140px;
          font-size: 14px;
          color: rgba(25, 25, 48, 0.75);
          background-color: #fff;
          border: 1px solid rgba(0, 0, 0, 0.12);
          border-radius: 6px;

          .ant-upload-text {
            margin-top: 13px;
            font-size: 14px;
            color: rgba(25, 25, 48, 0.75);
          }
        }
      }

      // .mini-width {
      //   max-width: 440px;
      // }

      .tag-box {
        display: flex;
        align-items: center;
        color: rgba(65, 84, 209, 1);

        .tag-list {
          display: flex;
          margin-left: 32px;
          max-width: calc(100% - 104px);
          gap: 0 16px;

          .tag {
            overflow: hidden;
            padding: 3px 6px;
            line-height: 22px;
            text-overflow: ellipsis;
            white-space: nowrap;
            border: 1px solid rgba(0, 0, 0, 0.05);
            border-radius: 6px;

            &.typeTag {
              color: #4686ed;
              background: rgba(65, 84, 209, 0.08);
            }

            &.personalizedTag {
              color: #d61860;
              background: rgba(214, 24, 96, 0.08);
            }

            .close {
              font-size: 12px;
              cursor: pointer;
              color: rgba(25, 25, 48, 0.45);
              transform: translateY(1px);
            }
          }
        }
      }

      .upload-flex {
        display: flex;
        align-items: center;
        height: 140px;

        &.flex-between {
          justify-content: space-between;
          height: 88px;
        }

        .upload-info {
          display: flex;
          margin-left: 24px;
          height: 100%;
          flex-direction: column;

          div {
            margin-top: auto;
            font-size: 12px;
            text-align: right;
            color: rgba(25, 25, 48, 0.45);
            line-height: 20px;
          }
        }
      }

      .demo-info-list {
        .demo-info {
          position: relative;
          padding: 12px 176px 20px 16px;
          margin-bottom: 16px;
          background: #fafafa;

          .input-box {
            margin-bottom: 16px;
          }

          .tools {
            position: absolute;
            top: 12px;
            right: 16px;
            display: flex;
            align-items: center;
            height: 22px;
            font-size: 18px;

            span {
              cursor: pointer;
            }

            .mid-line {
              display: inline-block;
              margin: 0 16px;
              width: 1px;
              height: 100%;
              background: #ebebeb;
            }

            .disable {
              color: rgba(25, 25, 48, 0.2);
            }

            .down-btn {
              margin-left: 25px;
            }

            .delete-btn {
              font-size: 14px;
            }
          }
        }

        .demo-add {
          margin-top: 16px;
          width: 38px;
          height: 38px;
          text-align: center;
          border: 1px solid #d9d9db;
          border-radius: 6px;
          box-shadow: 0 2px 0 rgba(0, 0, 0, 0.043);
          line-height: 38px;
          cursor: pointer;
        }
      }

      .service-type-box {
        padding: 16px 204px 24px 24px;
        background: #fafafa;
        border-radius: 6px;

        .type-item {
          display: flex;
          align-items: center;
          margin-bottom: 24px;

          .title {
            margin-right: 8px;
            min-width: 90px;
            .font14b();
          }

          .value-box {
            width: 100%;
          }
        }

        .upload-bottom {
          span {
            position: relative;
            display: flex;
            justify-content: flex-start;
          }

          .upload-btn {
            display: inline-block;
            padding: 8px 16px;

            .upload-btn-text {
              display: flex;
              align-items: center;
            }

            .icon {
              margin-right: 8px;
            }
          }

          .no-file {
            position: absolute;
            top: 8px;
            left: 126px;
            display: inline-block;
            margin-left: 16px;
            font-size: 14px;
            color: rgba(25, 25, 48, 0.2);
          }
        }
      }
    }
  }
</style>
